<template>
  <div class="none404">
    <h1>404</h1>
  </div>
</template>

<script>
export default {}
</script>

<style lang="less" scoped>
.none404 {
  width: 100vw;
  height: 100vh;
  background-color: #222222;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;

  h1 {
    color: #333333;
    /* css定义字符大写 */
    text-transform: uppercase;
    font-size: 8rem;
    position: relative;
  }
  h1::before {
    content: '404';
    text-transform: uppercase;
    /* 文字颜色透明，为了显出彩色背景 */
    color: transparent;
    position: absolute;
    left: 0;
    top: 0;
    background: linear-gradient(
      to left,
      red,
      orange,
      yellow,
      green,
      blue,
      indigo,
      purple
    );
    background: -webkit-linear-gradient(
      to left,
      red,
      orange,
      yellow,
      green,
      blue,
      indigo,
      purple
    );
    background-clip: text;
    -webkit-background-clip: text;

    /* 圆型裁切，参数依次是 圆的大小，圆心的横坐标，纵坐标 */
    clip-path: circle(100px at 0% 50%);
    -webkit-clip-path: circle(100px at 0% 50%);

    animation: identifier 3s infinite;
  }

  @keyframes identifier {
    /* 通过改变圆心位置设置动画 */
    0% {
      -webkit-clip-path: circle(100px at 0% 50%);
    }
    50% {
      -webkit-clip-path: circle(100px at 100% 50%);
    }
    100% {
      -webkit-clip-path: circle(100px at 0% 50%);
    }
  }
}
</style>
